<template>
  <div class="list">
    <common-head title="列表" rightText=""></common-head>
    <div class="list-navs">
      <p :class="['sales',{active:active.order==0}]" @click="orderBySale">销量</p>
      <div :class="['price',{active:active.order==1}]" @click="priceDown">
        <span>价格</span>
        <p class="price-order">
          <span :class="['up',{active:active.order==1&&active.price==1}]"></span>
          <span :class="['down',{active:active.order==1&&active.price==0}]"></span>
        </p>
      </div>
    </div>
    <div class="list-items">
      <div class="nomore" v-if="!lists.length">
        <p>暂无商品，敬请期待！</p>
      </div>
      <van-row v-else>
        <van-col
          span="12"
          v-for="item in lists"
          :key="item.id"
          @click="$router.push({path:`/detail/${item.id}`})"
        >
          <van-image width="138" height="138" fit="cover" lazy-load :src="item.pic" />
          <p class="name">{{item.name}}</p>
          <p class="price">{{item.minPrice | currency}}</p>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { currency } from "@/filters/index";
import CommonHead from "components/CommonHead";
import { getLists } from "@/services/list";

export default {
  data() {
    return {
      lists: [],
      active: {
        order: 0, // 0销量 1代表 价格
        price: 1 // 0 是降序 1是升序
      },
      orderState: "ordersDown"
    };
  },
  mounted() {
    this.fetchLists();
  },
  methods: {
    fetchLists() {
      getLists({
        cateId: this.$route.params.cateId,
        orderBy: this.orderState
      }).then(res => {
        if (res.data.code == 0) {
          this.lists = res.data.data;
        }
      });
    },
    orderBySale() {
      if (this.active.order == 0) {
        return;
      }
      this.active.order = 0;
      this.orderState = "ordersDown";
      this.fetchLists();
    },
    priceDown() {
      this.active.order = 1;

      if (this.active.price == 0) {
        this.active.price = 1;
        this.orderState = "priceUp";
      } else {
        this.active.price = 0;
        this.orderState = "priceDown";
      }
      this.fetchLists();
    }
  },
  components: {
    CommonHead
  }
};
</script>

<style lang="less" scoped>
.list {
  padding-top: 115px;
  &-navs {
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    position: fixed;
    top: 65px;
    color: #666;
    width: 100%;
    z-index: 100;
    background: #fff;
    .active {
      color: #1fdb9b;
    }
    .price {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .price-order {
      position: relative;
      span {
        position: absolute;
        right: -15px;
        color: #666;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        &.up {
          border-bottom-color: #666;
          top: -11px;
          &.active {
            border-bottom-color: #1fdb9b;
          }
        }
        &.down {
          border-top-color: #666;
          top: 4px;
          &.active {
            border-top-color: #1fdb9b;
          }
        }
      }
    }
  }
  &-items {
    background: #fafafa;
    position: relative;
    .nomore {
      text-align: center;
      width: 200px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      color: #999;
      font: 18px/30px "微软雅黑";
      z-index: 10;
    }
    .van-col {
      background: #fff;
      margin-top: 0;
      padding: 12px 8px;
      box-shadow: 0.03703704rem 0.03703704rem 0.2037037rem 0
        rgba(206, 206, 206, 0.28);
      border-radius: 0.37037037rem;
      .van-image {
        display: block;
        margin: 0 auto;
      }
      .name {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333;
      }
      .price {
        margin-top: 10px;
        color: #f30;
        font-size: 14px;
      }
    }
  }
}
</style>